特定のページだけBottom Tabを非表示にする

何がしたいか

BottomTabとStackを使ってページを構成する

ある特定のページでは、BottomTabを非表示にしたい

BottomTabの直下が、その「特定のページ」なら簡単

code:ts

<BottomTab.Navigator screenOptions={({ route }) => hiddenTabBar(route)}>

<BottomTab.Screen

options={{ tabBarStyle: {display: 'none'} }} // コレを書けばいい

component={Component}

/>

</BottomTab.Navigator>

上の書き方をすると、Stack全体でbottom tabが非表示なってしまう

どうするか

こんな構成になっているとする

BottomTab

HogeStack

A

B (bottom tabを非表示にしたい)

C (bottom tabを非表示にしたい)

こうする

code:ts

<BottomTab.Navigator screenOptions={({ route }) => hiddenTabBar(route)}>

<BottomTab.Screen

component={HogeStack}

/>

</BottomTab.Navigator>

code:ts

const hiddenTabBar = (route: RouteProp<ParamListBase, string>) => {

const title = getFocusedRouteNameFromRoute(route);

if (pageNameTabBarHidden.some(s => s === title)) {

return {

tabBarStyle: { display: 'none' }

} as const;

}

return {} as const;

};

ポイント

その中で条件分岐させる